<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合约交友列表 - 多筛选功能</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #4f46e5;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-bg: #f8fafc;
            --dark-text: #1e293b;
            --light-text: #64748b;
            --border-color: #e2e8f0;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .badge-contract {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--secondary-color);
            border: 1px solid var(--secondary-color);
        }
        
        .card {
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-3px);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--light-text);
            font-size: 0.875rem;
        }
        
        .stat-item i {
            color: var(--primary-color);
        }
        
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .image-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-grid-3 {
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .image-grid-3 img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .image-count-overlay {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--light-text);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.875rem;
        }
        
        .action-btn:hover {
            color: var(--primary-color);
        }
        
        .action-btn.liked {
            color: var(--danger-color);
        }
        
        .action-btn.saved {
            color: var(--primary-color);
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 1.5rem;
            font-weight: 600;
            padding-bottom: 8px;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* 筛选区域样式 */
        .filter-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
            overflow: hidden;
        }
        
        .filter-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-title {
            font-weight: 600;
            margin: 0;
        }
        
        .filter-toggle {
            color: var(--primary-color);
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        .filter-content {
            padding: 1.5rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
        }
        
        .filter-section-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .filter-tag {
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-tag:hover, .filter-tag.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
            color: var(--light-text);
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .quick-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            align-items: center;
        }
        
        .quick-filter-label {
            font-weight: 500;
            white-space: nowrap;
        }
        
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .active-filter-item {
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .active-filter-remove {
            cursor: pointer;
            font-weight: bold;
        }
        
        .card-image-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-image-container.single-image {
            height: 200px;
        }
        
        .card-image-container.multi-image {
            height: 160px;
        }
        
        .card-image-container.no-image {
            height: 120px;
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light-text);
        }
        
        .list-view-item {
            display: flex;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .list-view-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        }
        
        .list-image-container {
            width: 200px;
            flex-shrink: 0;
            position: relative;
        }
        
        .list-content {
            flex-grow: 1;
            padding: 1rem;
        }
        
        .grid-view .col {
            margin-bottom: 1.5rem;
        }
        
        .featured-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: var(--warning-color);
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .view-toggle {
            display: flex;
            gap: 10px;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 6px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .view-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .contract-terms {
            background-color: rgba(79, 70, 229, 0.05);
            border-left: 3px solid var(--secondary-color);
            padding: 8px 12px;
            margin: 0.75rem 0;
            font-size: 0.875rem;
            border-radius: 0 4px 4px 0;
        }
        
        .search-sort-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .search-box {
            flex-grow: 1;
            max-width: 500px;
        }
        
        .sort-select {
            min-width: 200px;
        }
        
        @media (max-width: 992px) {
            .list-image-container {
                width: 160px;
            }
        }
        
        @media (max-width: 768px) {
            .list-view-item {
                flex-direction: column;
            }
            
            .list-image-container {
                width: 100%;
                height: 160px;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .filter-actions {
                flex-direction: column;
            }
            
            .filter-actions button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-shield-alt"></i>
                <span>安全社交</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">担保交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">合约交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">兴趣群组</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">安全指南</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative">
                        <button class="btn btn-outline-light">
                            <i class="fas fa-bell"></i>
                        </button>
                        <span class="position-absolute top-0 right-0 translate-middle badge rounded-circle bg-danger">2</span>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的合约</a></li>
                            <li><a class="dropdown-item" href="#">消息通知</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-6">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1>合约交友列表</h1>
            <p class="text-light-text">找到适合你的交友合约，建立有意义的社交关系</p>
        </div>
        
        <!-- 搜索和排序 -->
        <div class="search-sort-container">
            <div class="search-box">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索合约标题、内容或作者...">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <div class="sort-select">
                    <select class="form-select">
                        <option>默认排序</option>
                        <option>最新发布</option>
                        <option>最多浏览</option>
                        <option>最多参与</option>
                        <option>即将到期</option>
                    </select>
                </div>
                <div class="view-toggle">
                    <button class="view-btn active" id="gridViewBtn" title="网格视图">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" id="listViewBtn" title="列表视图">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 快速筛选栏 -->
        <div class="quick-filter-bar">
            <span class="quick-filter-label">快速筛选:</span>
            <span class="filter-tag active">全部合约</span>
            <span class="filter-tag">我可能感兴趣</span>
            <span class="filter-tag">附近的合约</span>
            <span class="filter-tag">新发布</span>
            <span class="filter-tag">热门合约</span>
        </div>
        
        <!-- 高级筛选面板 -->
        <div class="filter-container">
            <div class="filter-header">
                <h3 class="filter-title">高级筛选</h3>
                <button class="filter-toggle" id="filterToggle">
                    <i class="fas fa-chevron-up"></i>
                    <span>收起筛选</span>
                </button>
            </div>
            <div class="filter-content" id="filterContent">
                <!-- 合约类别筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">合约类别</h4>
                    <div class="filter-tags">
                        <span class="filter-tag active">全部类别</span>
                        <span class="filter-tag">兴趣爱好</span>
                        <span class="filter-tag">学习交流</span>
                        <span class="filter-tag">户外活动</span>
                        <span class="filter-tag">职场社交</span>
                        <span class="filter-tag">文化艺术</span>
                        <span class="filter-tag">运动健身</span>
                        <span class="filter-tag">美食探店</span>
                        <span class="filter-tag">志愿者活动</span>
                    </div>
                </div>
                
                <!-- 合约期限筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">合约期限</h4>
                    <div class="filter-tags">
                        <span class="filter-tag active">不限</span>
                        <span class="filter-tag">短期 (1-2周)</span>
                        <span class="filter-tag">中期 (1-3个月)</span>
                        <span class="filter-tag">长期 (3个月以上)</span>
                    </div>
                </div>
                
                <!-- 参与人数筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">参与人数</h4>
                    <input type="range" min="1" max="50" value="20" class="form-range range-slider" id="participantRange">
                    <div class="range-labels">
                        <span>1人</span>
                        <span id="participantValue">最多20人</span>
                        <span>50人</span>
                    </div>
                </div>
                
                <!-- 活动频率筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">活动频率</h4>
                    <div class="filter-tags">
                        <span class="filter-tag active">不限</span>
                        <span class="filter-tag">每日</span>
                        <span class="filter-tag">每周</span>
                        <span class="filter-tag">每月</span>
                        <span class="filter-tag">不定期</span>
                    </div>
                </div>
                
                <!-- 活动形式筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">活动形式</h4>
                    <div class="filter-tags">
                        <span class="filter-tag active">全部形式</span>
                        <span class="filter-tag">线上活动</span>
                        <span class="filter-tag">线下活动</span>
                        <span class="filter-tag">线上+线下</span>
                    </div>
                </div>
                
                <!-- 距离筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">活动距离 (仅线下)</h4>
                    <input type="range" min="1" max="50" value="10" class="form-range range-slider" id="distanceRange">
                    <div class="range-labels">
                        <span>1公里内</span>
                        <span id="distanceValue">最多10公里</span>
                        <span>50公里内</span>
                    </div>
                </div>
                
                <!-- 其他筛选 -->
                <div class="filter-section">
                    <h4 class="filter-section-title">其他条件</h4>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="hasImage">
                        <label class="form-check-label" for="hasImage">仅看有图片</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="verifiedOnly">
                        <label class="form-check-label" for="verifiedOnly">仅看认证用户</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="featuredOnly">
                        <label class="form-check-label" for="featuredOnly">仅看精选合约</label>
                    </div>
                </div>
                
                <!-- 筛选操作按钮 -->
                <div class="filter-actions">
                    <button class="btn btn-outline-secondary" id="resetFilters">重置筛选条件</button>
                    <button class="btn btn-primary">应用筛选</button>
                </div>
                
                <!-- 已选筛选条件 -->
                <div class="active-filters">
                    <div class="active-filter-item">
                        类别: 户外活动
                        <span class="active-filter-remove">&times;</span>
                    </div>
                    <div class="active-filter-item">
                        期限: 中期 (1-3个月)
                        <span class="active-filter-remove">&times;</span>
                    </div>
                    <div class="active-filter-item">
                        最多20人参与
                        <span class="active-filter-remove">&times;</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 网格视图合约列表 -->
        <section class="mb-10 grid-view" id="gridView">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="section-title mb-0">符合条件的合约 (24)</h2>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-sliders me-1"></i> 保存筛选条件
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-share-alt me-1"></i> 分享结果
                    </button>
                </div>
            </div>
            
            <div class="row">
                <!-- 合约1 - 单张图片 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container single-image">
                            <img src="https://picsum.photos/id/292/400/300" alt="健身伙伴合约" class="w-100 h-100 object-cover">
                            <span class="featured-badge">热门</span>
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">健身伙伴合约 - 每周3次</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每周3次健身房锻炼，互相监督，持续2个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找健身伙伴一起锻炼，互相鼓励，共同进步。主要进行力量训练和有氧运动。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1074/36/36" alt="刘阳的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">刘阳</span>
                                    <div class="text-xs text-light-text">健身教练 · 已认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>456</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>37</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>8/12</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>128</span>
                                </button>
                                <button class="action-btn saved">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合约2 - 三张图片 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container multi-image position-relative">
                            <div class="image-grid image-grid-3">
                                <img src="https://picsum.photos/id/301/400/400" alt="旅行照片1">
                                <img src="https://picsum.photos/id/302/200/200" alt="旅行照片2">
                                <img src="https://picsum.photos/id/303/200/200" alt="旅行照片3">
                            </div>
                            <span class="image-count-overlay">+3</span>
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">周末短途旅行合约 - 每月一次</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每月一次周边短途旅行，费用AA，持续6个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找喜欢旅行的朋友，每月探索一个周边景点，感受不同地方的风土人情和自然景观。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1079/36/36" alt="孙浩然的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">孙浩然</span>
                                    <div class="text-xs text-light-text">旅行爱好者 · 已认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>753</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>89</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>15/20</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>245</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合约3 - 两张图片 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container multi-image">
                            <div class="image-grid">
                                <img src="https://picsum.photos/id/1060/200/200" alt="摄影活动照片1">
                                <img src="https://picsum.photos/id/1062/200/200" alt="摄影活动照片2">
                            </div>
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">城市摄影采风合约 - 每周一次</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每周六一起城市采风，分享摄影技巧，持续2个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找摄影爱好者，一起探索城市角落，记录美好瞬间。无论新手还是有经验者都欢迎。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1012/36/36" alt="李明的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">李明</span>
                                    <div class="text-xs text-light-text">摄影师 · 已认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>876</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>103</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>12/15</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>342</span>
                                </button>
                                <button class="action-btn saved">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合约4 - 单张图片 -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container single-image">
                            <img src="https://picsum.photos/id/1058/400/300" alt="徒步活动合约" class="w-100 h-100 object-cover">
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">周末徒步小组合约 - 每周日</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每周日上午徒步，难度适中，持续3个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找喜欢户外徒步的朋友，每周探索不同路线，享受大自然，锻炼身体。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1066/36/36" alt="张伟的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">张伟</span>
                                    <div class="text-xs text-light-text">户外领队 · 已认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>532</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>47</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>18/20</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>178</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 更多合约... -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container single-image">
                            <img src="https://picsum.photos/id/1059/400/300" alt="骑行活动合约" class="w-100 h-100 object-cover">
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">城市骑行探索合约 - 每两周一次</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每两周一次城市周边骑行，持续3个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找骑行爱好者，探索城市周边路线，享受骑行乐趣，适合有一定经验的骑手。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1071/36/36" alt="王强的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">王强</span>
                                    <div class="text-xs text-light-text">骑行爱好者</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>324</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>23</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>6/10</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>89</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-image-container no-image">
                            <i class="fas fa-tree fa-2x"></i>
                        </div>
                        <div class="card-body flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fs-6">环保志愿者活动合约 - 每月两次</h5>
                                <span class="badge badge-contract">户外活动</span>
                            </div>
                            
                            <div class="contract-terms">
                                <strong>合约：</strong>每月两次环保志愿活动，持续6个月
                            </div>
                            
                            <p class="card-text text-sm text-light-text mt-2 line-clamp-2">
                                寻找关注环保的朋友，一起参与公园清洁、植树等活动，为保护环境贡献力量。
                            </p>
                            
                            <div class="author-info mt-3 mb-3">
                                <img src="https://picsum.photos/id/1083/36/36" alt="林小绿的头像" class="author-avatar">
                                <div>
                                    <span class="font-medium text-sm">林小绿</span>
                                    <div class="text-xs text-light-text">环保志愿者 · 已认证</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>412</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>31</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>14/20</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>156</span>
                                </button>
                                <button class="action-btn saved">
                                    <i class="fas fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <nav class="mt-8">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </section>
        
        <!-- 列表视图合约列表 -->
        <section class="mb-10 d-none list-view" id="listView">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="section-title mb-0">符合条件的合约 (24)</h2>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-sliders me-1"></i> 保存筛选条件
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-share-alt me-1"></i> 分享结果
                    </button>
                </div>
            </div>
            
            <!-- 合约1 - 单张图片 -->
            <div class="list-view-item">
                <div class="list-image-container">
                    <img src="https://picsum.photos/id/292/400/400" alt="健身伙伴合约" class="w-100 h-100 object-cover">
                    <span class="featured-badge">热门</span>
                </div>
                <div class="list-content">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h5 class="mb-1">健身伙伴合约 - 每周3次</h5>
                            <span class="badge badge-contract mb-2">户外活动</span>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>128</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="btn btn-sm btn-primary">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="contract-terms mb-2">
                        <strong>合约内容：</strong>每周3次健身房锻炼，互相监督，持续2个月
                    </div>
                    
                    <p class="text-sm text-light-text mb-3 line-clamp-1">
                        寻找健身伙伴一起锻炼，互相鼓励，共同进步。主要进行力量训练和有氧运动。
                    </p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex items-center gap-4">
                            <div class="author-info">
                                <img src="https://picsum.photos/id/1074/36/36" alt="刘阳的头像" class="author-avatar">
                                <span class="font-medium text-sm">刘阳</span>
                            </div>
                            <div class="d-flex gap-3">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>456</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>37</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>8/12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 合约2 - 多张图片 -->
            <div class="list-view-item">
                <div class="list-image-container">
                    <div class="image-grid image-grid-3 h-100">
                        <img src="https://picsum.photos/id/301/400/400" alt="旅行照片1">
                        <img src="https://picsum.photos/id/302/200/200" alt="旅行照片2">
                        <img src="https://picsum.photos/id/303/200/200" alt="旅行照片3">
                    </div>
                    <span class="image-count-overlay">+3</span>
                </div>
                <div class="list-content">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h5 class="mb-1">周末短途旅行合约 - 每月一次</h5>
                            <span class="badge badge-contract mb-2">户外活动</span>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>245</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="btn btn-sm btn-primary">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="contract-terms mb-2">
                        <strong>合约内容：</strong>每月一次周边短途旅行，费用AA，持续6个月
                    </div>
                    
                    <p class="text-sm text-light-text mb-3 line-clamp-1">
                        寻找喜欢旅行的朋友，每月探索一个周边景点，感受不同地方的风土人情和自然景观。
                    </p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex items-center gap-4">
                            <div class="author-info">
                                <img src="https://picsum.photos/id/1079/36/36" alt="孙浩然的头像" class="author-avatar">
                                <span class="font-medium text-sm">孙浩然</span>
                            </div>
                            <div class="d-flex gap-3">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>753</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>89</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>15/20</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 合约3 - 两张图片 -->
            <div class="list-view-item">
                <div class="list-image-container">
                    <div class="image-grid h-100">
                        <img src="https://picsum.photos/id/1060/200/200" alt="摄影活动照片1">
                        <img src="https://picsum.photos/id/1062/200/200" alt="摄影活动照片2">
                    </div>
                </div>
                <div class="list-content">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h5 class="mb-1">城市摄影采风合约 - 每周一次</h5>
                            <span class="badge badge-contract mb-2">户外活动</span>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>342</span>
                            </button>
                            <button class="action-btn saved">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="btn btn-sm btn-primary">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="contract-terms mb-2">
                        <strong>合约内容：</strong>每周六一起城市采风，分享摄影技巧，持续2个月
                    </div>
                    
                    <p class="text-sm text-light-text mb-3 line-clamp-1">
                        寻找摄影爱好者，一起探索城市角落，记录美好瞬间。无论新手还是有经验者都欢迎。
                    </p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex items-center gap-4">
                            <div class="author-info">
                                <img src="https://picsum.photos/id/1012/36/36" alt="李明的头像" class="author-avatar">
                                <span class="font-medium text-sm">李明</span>
                            </div>
                            <div class="d-flex gap-3">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>876</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>103</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-users"></i>
                                    <span>12/15</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <nav class="mt-8">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">安全社交平台</h5>
                    <p class="text-muted">专注于提供安全、可靠的社交环境，所有交友推荐均经过身份认证</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">担保交友</a></li>
                        <li><a href="#" class="text-muted">合约交友</a></li>
                        <li><a href="#" class="text-muted">兴趣群组</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">安全中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">身份认证</a></li>
                        <li><a href="#" class="text-muted">安全指南</a></li>
                        <li><a href="#" class="text-muted">举报中心</a></li>
                        <li><a href="#" class="text-muted">隐私政策</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">发布合约交友</h5>
                    <p class="text-muted mb-3">创建你的交友合约，找到志同道合的朋友一起实现目标</p>
                    <button class="btn btn-primary w-100">
                        <i class="fas fa-plus me-1"></i> 发布合约
                    </button>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 安全社交平台 版权所有 | 致力于提供安全的社交环境</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 视图切换功能
        const gridViewBtn = document.getElementById('gridViewBtn');
        const listViewBtn = document.getElementById('listViewBtn');
        const gridView = document.getElementById('gridView');
        const listView = document.getElementById('listView');
        
        gridViewBtn.addEventListener('click', function() {
            gridView.classList.remove('d-none');
            listView.classList.add('d-none');
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
        });
        
        listViewBtn.addEventListener('click', function() {
            listView.classList.remove('d-none');
            gridView.classList.add('d-none');
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
        });
        
        // 筛选面板展开/收起功能
        const filterToggle = document.getElementById('filterToggle');
        const filterContent = document.getElementById('filterContent');
        const filterIcon = filterToggle.querySelector('i');
        const filterText = filterToggle.querySelector('span');
        
        filterToggle.addEventListener('click', function() {
            filterContent.classList.toggle('d-none');
            
            if (filterContent.classList.contains('d-none')) {
                filterIcon.classList.remove('fa-chevron-up');
                filterIcon.classList.add('fa-chevron-down');
                filterText.textContent = '展开筛选';
            } else {
                filterIcon.classList.remove('fa-chevron-down');
                filterIcon.classList.add('fa-chevron-up');
                filterText.textContent = '收起筛选';
            }
        });
        
        // 参与人数滑块
        const participantRange = document.getElementById('participantRange');
        const participantValue = document.getElementById('participantValue');
        
        participantRange.addEventListener('input', function() {
            participantValue.textContent = `最多${this.value}人`;
        });
        
        // 距离滑块
        const distanceRange = document.getElementById('distanceRange');
        const distanceValue = document.getElementById('distanceValue');
        
        distanceRange.addEventListener('input', function() {
            distanceValue.textContent = `最多${this.value}公里`;
        });
        
        // 筛选标签点击事件
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是"全部类别"或同组中的"不限"选项，则取消同组中其他标签的选中状态
                const parentGroup = this.parentElement;
                const isAllOrUnlimited = this.textContent.includes('全部') || this.textContent.includes('不限');
                
                if (isAllOrUnlimited) {
                    parentGroup.querySelectorAll('.filter-tag').forEach(t => {
                        t.classList.remove('active');
                    });
                } else {
                    // 取消同组中"全部"或"不限"选项的选中状态
                    parentGroup.querySelectorAll('.filter-tag').forEach(t => {
                        if (t.textContent.includes('全部') || t.textContent.includes('不限')) {
                            t.classList.remove('active');
                        }
                    });
                }
                
                // 切换当前标签的选中状态
                this.classList.toggle('active');
            });
        });
        
        // 重置筛选条件
        document.getElementById('resetFilters').addEventListener('click', function() {
            // 重置所有筛选标签
            document.querySelectorAll('.filter-tag').forEach(tag => {
                if (tag.textContent.includes('全部') || tag.textContent.includes('不限')) {
                    tag.classList.add('active');
                } else {
                    tag.classList.remove('active');
                }
            });
            
            // 重置滑块
            participantRange.value = 20;
            participantValue.textContent = '最多20人';
            distanceRange.value = 10;
            distanceValue.textContent = '最多10公里';
            
            // 重置复选框
            document.getElementById('hasImage').checked = false;
            document.getElementById('verifiedOnly').checked = false;
            document.getElementById('featuredOnly').checked = false;
            
            // 清空已选筛选条件
            const activeFilters = document.querySelector('.active-filters');
            while (activeFilters.children.length > 0) {
                activeFilters.removeChild(activeFilters.firstChild);
            }
        });
        
        // 移除已选筛选条件
        document.querySelectorAll('.active-filter-remove').forEach(removeBtn => {
            removeBtn.addEventListener('click', function() {
                this.parentElement.remove();
                // 这里可以添加逻辑，同步更新对应的筛选条件
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            if (btn.querySelector('.fa-heart')) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        countSpan.textContent = (parseInt(countSpan.textContent) + 1).toString();
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        countSpan.textContent = (parseInt(countSpan.textContent) - 1).toString();
                    }
                });
            }
            
            // 收藏功能
            if (btn.querySelector('.fa-bookmark')) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        // 收藏
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                    } else {
                        // 取消收藏
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                    }
                });
            }
        });
    </script>
</body>
</html>
    
